<template>
  <div id="echartsMap">
    <table style="height:100%;width:100%;">
      <tr>
      <td id="tdMap" rowspan="2">
           <div id="echartsChina"></div>
      </td>
      <td>
        <div id="echartsRigthTop"></div>
      </td>
        </tr>
        <tr>
          <td>
            <div id="echartsRigthBottom"></div>
          </td>
          </tr>
    </table>
     
  </div>
</template>

<script>
import option from '../../assets/js/map-option.js'
import echartsRigthTopOption from '../../assets/js/echartsRightTop.js'
import echartsRigthBottomOption from '../../assets/js/echartsRightBottom.js'
require('echarts/map/js/china')
//require('echarts/map/js/province/anhui')

export default {
  name: 'echartsMap',
  data () {
    return {
      listComponents:[{name:'安徽',path:'/echartsChina/province/AnHui',components:'views/echartsChina/province/AnHui',id:'anhui'},
                      {name:'上海',path:'/echartsChina/province/ShangHai',components:'views/echartsChina/province/ShangHai'},
                      {name:'澳门',path:'/echartsChina/province/AoMen',components:'views/echartsChina/province/AoMen'},
                      {name:'福建',path:'/echartsChina/province/FuJian',components:'views/echartsChina/province/FuJian'},
                      {name:'甘肃',path:'/echartsChina/province/GanSu',components:'views/echartsChina/province/GanSu'},
                      {name:'广东',path:'/echartsChina/province/GuangDong',components:'views/echartsChina/province/GuangDong'},
                      {name:'广西',path:'/echartsChina/province/GuangXi',components:'views/echartsChina/province/GuangXi'},
                      {name:'贵州',path:'/echartsChina/province/GuiZhou',components:'views/echartsChina/province/GuiZhou'},
                      {name:'海南',path:'/echartsChina/province/HaiNan',components:'views/echartsChina/province/HaiNan'},
                      {name:'河北',path:'/echartsChina/province/HeBei',components:'views/echartsChina/province/HeBei'},
                      {name:'黑龙江',path:'/echartsChina/province/HeiLongJiang',components:'views/echartsChina/province/HeiLongJiang'},
                      {name:'河南',path:'/echartsChina/province/HeNan',components:'views/echartsChina/province/HeNan'},
                      {name:'湖北',path:'/echartsChina/province/HuBei',components:'views/echartsChina/province/HuBei'},
                      {name:'湖南',path:'/echartsChina/province/HuNan',components:'views/echartsChina/province/HuNan'},
                      {name:'江苏',path:'/echartsChina/province/JiangSu',components:'views/echartsChina/province/JiangSu'},
                      {name:'江西',path:'/echartsChina/province/JiangXi',components:'views/echartsChina/province/JiangXi'},
                      {name:'吉林',path:'/echartsChina/province/JiLin',components:'views/echartsChina/province/JiLin'},
                      {name:'辽宁',path:'/echartsChina/province/NiaoNing',components:'views/echartsChina/province/NiaoNing'},
                      {name:'内蒙古',path:'/echartsChina/province/NeiMengGu',components:'views/echartsChina/province/NeiMengGu'},
                      {name:'宁夏',path:'/echartsChina/province/NingXia',components:'views/echartsChina/province/NingXia'},
                      {name:'青海',path:'/echartsChina/province/QingHai',components:'views/echartsChina/province/QingHai'},
                      {name:'山东',path:'/echartsChina/province/ShanDong',components:'views/echartsChina/province/ShanDong'},
                      {name:'山西',path:'/echartsChina/province/ShanXi',components:'views/echartsChina/province/ShanXi'},
                      {name:'陕西',path:'/echartsChina/province/ShanXi1',components:'views/echartsChina/province/ShanXi1'},
                      {name:'四川',path:'/echartsChina/province/SiChuan',components:'views/echartsChina/province/SiChuan'},
                      {name:'台湾',path:'/echartsChina/province/TaiWan',components:'views/echartsChina/province/TaiWan'},
                      {name:'香港',path:'/echartsChina/province/XiangGang',components:'views/echartsChina/province/XiangGang'},
                      {name:'新疆',path:'/echartsChina/province/XinJiang',components:'views/echartsChina/province/XinJiang'},
                      {name:'西藏',path:'/echartsChina/province/XiZang',components:'views/echartsChina/province/XiZang'},
                      {name:'云南',path:'/echartsChina/province/YunNan',components:'views/echartsChina/province/YunNan'},
                      {name:'浙江',path:'/echartsChina/province/ZheJiang',components:'views/echartsChina/province/ZheJiang'}],
    }
  },
  mounted(){
    this.drawChinaMap();
  },
  methods: {
          drawTop(){
            let that = this;
            let myChartTop = that.$echarts.init(document.getElementById('echartsRigthTop'));
             myChartTop.setOption(echartsRigthTopOption);
             setTimeout(() => {
               that.drawBottom();
             }, 100);
          },
          drawBottom(){
            let that = this;
            let myChartTop = that.$echarts.init(document.getElementById('echartsRigthBottom'));
             myChartTop.setOption(echartsRigthBottomOption);
          },
          drawChinaMap() {
            let that = this;
             let myChart = that.$echarts.init(document.getElementById('echartsChina'));
        
             myChart.setOption(option);
            setTimeout(() => {
                that.drawTop();
            }, 100);

            


            // let myChart2 = this.$echarts.init(document.getElementById('echartsProvince'));

            // myChart2.setOption(optionAnhui);
            myChart.on('click', function (params) {
              //alert(params.name);
              var comp = that.getComponentsByName(params.name);
              //that.$router.push(comp.path,comp.components);
              that.$router.push({
                path:comp.path,
                components:comp.components,
                query:{
                  'id':'anhui'
                }
              });
            });
          },
          getComponentsByName(name){

            for(var i = 0, cm; cm = this.listComponents[i++];){
                if(cm.name == name)
                {
                  return cm;
                }
            }
          },
        }
        
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #echartsMap{
      width: 100%;
      height:500px;
      display:block;
      align-items: center;        /* 垂直居中 */
      justify-content: center;    /* 水平居中 */
  }

  #echartsChina{
    width:95%;
    height:95%;
    display:block;
    float: left;
  }
  
  #tdMap{
    width:75%;
    height:500px;
  }

  #echartsProvince{
    width:80%;
    height:400px;
    display:block;
    border-radius: 5px;
    box-sizing: border-box;
    background: #fff;
  }

  #echartsRigthTop{
    width: 100%;
    height:300px;

  }

  #echartsRigthBottom{
    width: 100%;
    height:300px;
  }
</style>
